<template>
  <div class='user-search'>
    <el-form :model='searchForm' label-width='70px' size='large'>
      <el-row :gutter='80'>
        <template v-for='item in searchConfig.formItems' :key='item.prop'>
          <el-col :span='8'>
            <el-form-item :label='item.label' :prop='item.prop'>
              <template v-if='item.type === "input"'>
                <el-input v-model='searchForm[item.prop]' :placeholder='item.placeholder' />
              </template>
              <template v-if='item.type === "data-picker"'>
                <el-date-picker
                  v-model='searchForm.createAt'
                  type='daterange'
                  range-separator='-'
                  start-placeholder='开始时间'
                  end-placeholder='结束时间'
                />
              </template>
              <template v-if='item.type === "select"'>
                <el-select v-model='searchForm[item.prop]' :placeholder='item.placeholder'>
                  <template v-for='option in item.options' :key='option.value'>
                    <el-option :label='option.label' :value='option.value' />
                  </template>
                </el-select>
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>

    <!--    重置和搜索按钮-->
    <div class='btns'>
      <el-button
        size='large'
        :icon='Refresh'
        @click='handleReset'
      >重置
      </el-button>
      <el-button
        v-if='isQuery'
        size='large'
        type='primary'
        :icon='Search'
        @click='handleSearch'
      >搜索
      </el-button>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue'
import { Refresh, Search } from '@element-plus/icons-vue'
import usePermissions from '@/hooks/usePermissions'
import {localCache} from "@/utils/storage";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";

interface IProps {
  searchConfig: {
    pageName: string,
    formItems: any[]
  }
}

const props = defineProps<IProps>()

const select = ref()
const dataVal = ref()
const router = useRouter()

// 判断当前用户所拥有的权限之前先判断localStorage是否有存permission，没有说明当前用户没有获取到权限列表
if (localCache.getStorage('permission') === undefined) {
  ElMessage({
    message: '登陆失效，请重新登陆',
    type: 'warning'
  })
  setTimeout(() => {
    router.push({ name: 'login' })
  }, 300)
}

// 判断当前登陆用户所拥有的按钮权限
const isQuery = usePermissions('system:' + props.searchConfig.pageName + ':query')

// 定义自定义事件
const emit = defineEmits(['handleSearch', 'handleReset'])

const initialForm: any = {}
for (const item of props.searchConfig.formItems) {
  initialForm[item.prop] = item.initialVal ?? ''
}

const searchForm = reactive(initialForm)

// 重置操作
const handleReset = () => {
  for (let key in searchForm) {
    if (searchForm[key] instanceof Array) {
      searchForm[key] = []
    } else {
      searchForm[key] = ''
    }
  }

  emit('handleReset')
}

const handleSearch = () => {
  console.log('into')
  emit('handleSearch', searchForm)
}
</script>

<style scoped lang='less'>
.user-search {
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;

  .el-form-item {
    padding: 20px;
    margin-bottom: 0;
  }

  .btns {
    text-align: right;
    padding: 0 5px 10px 0;
  }
}
</style>
